
<!DOCTYPE html>

<html>
    <head>
        <title>littleware js Test Page</title>

        <link rel="stylesheet" href="/resources/yui_3.6.0/yui/build/cssreset/cssreset.css" type="text/css" />
        <link rel="stylesheet" href="/resources/yui_3.6.0/yui/build/cssbase/cssbase.css"  type="text/css" />
        <link rel="stylesheet" href="/resources/yui_3.6.0/yui/build/cssfonts/cssfonts.css" type="text/css" />
        <link rel="stylesheet" href="/resources/yui_3.6.0/yui/build/cssgrids/cssgrids.css" type="text/css" /> 

        <link rel="stylesheet" type="text/css" href="../../../css/littleware/little.css" />
        <link rel="stylesheet" type="text/css" href="../../../css/littleware/littleTree.css" />

        <style>
            /* Avoid resource latency for these, since they hide unenhanced content */
            .yui3-js-enabled .yui3-scrollview-loading {
                visibility:hidden;
            }

            #additional-content {
                display:none;
            }
        </style>
        
        <style id="yuiInsertBeforeMe" type="text/css">
            body {
                margin: auto; /* center in viewport */
                width: 960px;
                padding: 0.5em;
            }   
            
            div.fbArea {
               width:10em; 
            }
            
            div.fbTask {
               clear:both; 
               border:1px solid black;
               background-color:#ddddaa;
            }
            div.fbBar {
                clear:both;
                font-size:90%;
                font-weight: bold;
                background-color:#00ff00;
            }
            div.fbContent {
                clear:both;
                font-size:80%;
                border: 2px inset #aaaaaa;
                height:10em;
            }
          
        </style>
        
    </head>
    <body class="yui3-skin-sam">

        <div class="yui3-g">
            <div class="yui3-u-5-24">
                <div id="leftColumn">
                    <h3>Left Column</h3>
          
                    <div id="fbArea" class="yui3-scrollview-loading fbArea">
                        <div class="fbTask">
                            <div class="fbBar" style="width:20%;">20%</div>
                            <div class="fbContent">
                            bla
                            </div>
                        </div>
                        <div class="fbTask" style="background-color:#dddddd">
                            <div class="fbBar" style="width:40%;">40%</div>
                            <div class="fbContent">
                            ugh
                            </div>
                        </div>
                        <div class="fbTask">
                            <div class="fbBar" style="width:20%;">20%</div>
                            <div class="fbContent">
                            bla
                            </div>
                        </div>
                        <div class="fbTask" style="background-color:#dddddd">
                            <div class="fbBar" style="width:40%;">40%</div>
                            <div class="fbContent">
                            ugh
                            </div>
                        </div>                        
                        <div class="fbTask">
                            <div class="fbBar" style="width:20%;">20%</div>
                            <div class="fbContent">
                            bla
                            </div>
                        </div>
                        <div class="fbTask" style="background-color:#dddddd">
                            <div class="fbBar" style="width:40%;">40%</div>
                            <div class="fbContent">
                            ugh
                            </div>
                        </div>                        
                        
                    </div>
                </div>

            </div>
            <div class="yui3-u-19-24">
                <h1>Hello World!</h1>

                <div id="content">
                    Bla
                    
                    <div id="testTaskBar" class="yui3-scrollview-loading fbArea">
                        
                    </div>
                       
                </div>
            </div>
        </div>

        <script type="text/x-template" id="taskViewTemplate">
            <div class="fbTask">
                <div class="fbBar" style="width:0%;">0%</div>
                <div class="fbContent">
                (Running ...)
                </div>
            </div>            
        </script>  

        <script src="/resources/yui_3.6.0/yui/build/yui/yui-debug.js"></script>
        <script type="text/javascript" src="../littleYUI.js" charset="utf-8"></script>

        <script>
    
            // Create a YUI sandbox on your page.
            //YUI().use(
            littleware.littleYUI.bootstrap().use( 
                'node', 'node-base', 'event', 'test', 
                'littleware-feedback-model', 'littleware-feedback-view', 'littleware-littleUtil',
                'scrollview',
                function (Y) {
                    // The modules are loaded and ready to use.
                    var util = Y.littleware.littleUtil;
                    var fb = Y.littleware.feedback;
                    var log = new util.Logger( "littleFbTestSuite.html" );
                    
                    function runTestSuite() {
                        //alert( "Ugh" );
                        log.log( "Ugh" );
                        var modelSuite = Y.littleware.feedback.model.buildTestSuite();
                        var viewSuite = Y.littleware.feedback.view.buildTestSuite();
                        //alert( "Ugh2" );
                        //log.log( "Ugh3: " + JSON.stringify( Y.littleware.littleUtil.keys( Y.littleware.feedback.model ) ) );
                        Y.Test.Runner.add( modelSuite );
                        Y.Test.Runner.add( viewSuite );
                        Y.Test.Runner.run(); 
                    };
                    
                    function setupScrolling() {
                        var scrollview = new Y.ScrollView({
                            srcNode:"#fbArea",
                            height:"30em",
                            width: "11em"
                          }); 
                        scrollview.render(); 
                        
                        var scrollTaskBar = new Y.ScrollView({
                            srcNode:"#testTaskBar",
                            height:"30em",
                            width: "11em"
                          }); 
                        scrollTaskBar.render();
                        fb.model.taskFactory.after( "activeTasksChange", function(ev) {
                           scrollTaskBar.syncUI(); 
                        });
                    };
                    
                    setupScrolling();
                    runTestSuite();
            });

        </script>

    </body>
</html>
